<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>菜单列表</title>
    <style>
        html{
            width: 100%;
            height: 800px;
        }
        body{
            margin-top:0px;
            width: 100%;
            height: 100%;
        }
        .main-container{
            margin:0px auto;
            width: 90%;
            border: 1px solid red;
            height: 800px;

        }

        .top-container{
            width: 100%;
            height: 100px;
            background-color: coral;
            display: flex;
        }
        .top-container .title{
            width:60%;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-family: "宋体";
            font-size: 60px;
            font-weight: bold;
            color: #ffffff;
        }
        .top-container .persion{
            width: 40%;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .top-container .persion a:link{
            text-decoration: none;
            font-size: 20px;
            font-weight: bold;
            color: cornflowerblue;
            letter-spacing: 5px;
        }



        .top-container .persion a:visited{
            text-decoration: none;
            font-size: 20px;
            font-weight: bold;
            color: cornflowerblue;
            letter-spacing: 5px;
        }

        .top-container .persion a:hover{
            text-decoration: none;
            font-size: 20px;
            font-weight: bold;
            color: red;
            letter-spacing: 5px;
        }

        .top-container .carCount{
            position: absolute;
            padding-left: 5px;
            top:30px;
            right: 220px;
            width: 26px;
            height: 26px;
            border-radius: 100%;
            border: 0px solid red;
            background-color: #ffffff;
            text-align: center;
            line-height: 26px;
            color: red;
            font-weight: bold;
        }

        .eatList{
            width: 100%;

        }
        .bottom-container{
            width: 100%;
            height: 200px;
            background-color: cornflowerblue;
        }

        .eat-container{
            display: flex;
        }

        .eat-element{
            margin: 5px;
            width: 20%;
            border: 0px solid red;
            background-color: lightblue;
        }
        .eat-element .img-div{
            width: 100%;
            text-align: center;
        }
        .eat-element img{
            width: 150px;
            height: 120px;
        }
        .eat-element .desc-div{
            padding-left: 30px;
        }
        .eat-element .desc-div span{
            display: block;
            margin: 3px 0px;
            margin-left:40px;
        }
        .desc-div span:last-child label{
            color: red;
        }
        .bottom-car{
            display: flex;
            margin:5px;
        }

        .bottom-car form{
            width: 100%;
            margin:0px;
            border: 0px solid red;
            padding: 0px;
            display: flex;
        }
        .bottom-car div{
            margin-left: 5px;
        }
        .bottom-car .car-num{
            border: 0px solid red;
        }
        .bottom-car .car-num button{

            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 20px;
        }
        .bottom-car .car-num input{
            text-align: center;
            margin-top: -3px;
            width: 30px;
            height: 30px;
        }
        .btn-car button{

            height: 30px;
        }
    </style>
</head>
<body>
<div class="main-container">
    <div class="top-container">
        <div class="title">
            三味蒸火快餐店
        </div>
        <div class="persion">
            <!--
                choose标签等同于Java中的switch-case语句
            -->
            <c:choose>
                <c:when test="${sessionScope.user!=null}">
                    <div class="userInfo">
                            <span>
                                <span style="color:#ffffff;font-weight: bold">欢迎您:</span>
                                <span style="color: #ffffff;font-weight: bold">${sessionScope.user.user_name}</span>
                                <a href="user.do?operate=exit">退出</a>
                                <a href="car/car.do?operate=showCar">购物车<div class="carCount">${requestScope.count}</div></a>

                            </span>
                    </div>
                </c:when>

                <c:otherwise>
                    <div>
                        <a href="login.jsp">登录</a>
                        <a href="register.jsp">注册</a>
                    </div>
                </c:otherwise>
            </c:choose>




        </div>
    </div>
    <div class="eatList">
        <!--
            遍历标签
            items:指定要遍历的集合(从request作用域中获取的属性)
            var:每次遍历都会将集合中的一个元素赋给var指定的变量
            varStatus:表示当前标签的循环变量，其中有两个属性
                1.index:循环下标
                2.count:统计循环次数
        -->
        <c:forEach items="${requestScope.eatList}" var="eat" varStatus="status">
            <c:if test="${(status.index+1)%5==1}">
                <div class="eat-container">
            </c:if>



            <div class="eat-element">
                <div class="img-div">
                    <img src="images/eat/${eat.eat_image}"/>
                </div>
                <div class="desc-div">
                        <span>
                            <a href="eat.do?operate=queryEatById&eat_id=${eat.eat_id}">
                            菜名:${fn:length(eat.eat_name)>=10?fn:substring(eat.eat_name,0 ,11 ):eat.eat_name}
                            </a>
                        </span>

                    <span>单价:<label>¥${eat.eat_price}</label></span>

                </div>
                <div class="bottom-car">
                    <form method="post" action="car/car.do?operate=addCar">
                        <div class="car-num">
                            <button type="button" onclick="updateCarCount('-','count${eat.eat_id}')">-</button>
                            <input onblur="checkCount('count${eat.eat_id}')" type="text" name="count" id="count${eat.eat_id}" value="1" size="1"/>
                            <input type="hidden" name="eat_id" value="${eat.eat_id}"/>
                            <button type="button" onclick="updateCarCount('+','count${eat.eat_id}')">+</button>
                        </div>
                        <div class="btn-car">
                            <button>加入购物车</button>
                        </div>
                    </form>


                </div>
            </div>
            <c:if test="${(status.index+1)%5==0}">
                </div>
            </c:if>

        </c:forEach>




    </div>
    <div class="bottom-container" >
        <img src="images/eat/banner1.jpg " width="100%" height="100%">
    </div>
</div>

<script>
    /**
     * 修改添加购物菜品的数量
     * @param fuhao
     */
    function updateCarCount(fuhao,id){
        //根据元素id获得数量输入框对象
        let countInput = document.getElementById(id);
        if(fuhao=="+"){//数量增加
            //设置输入框中的值+1
            countInput.value = parseInt(countInput.value)+1;
        }else if(fuhao=="-"){//数量减少
            if(countInput.value==1){
                alert("购物数量不能小于1");
            }else{
                //设置输入框中的值-1
                countInput.value = parseInt(countInput.value)-1;
            }

        }
    }

    /**
     * 检测添加购物车中输入框的数量是否小于1，如果小于1则自动恢复到1
     * @param id
     */
    function checkCount(id){
        let countInput = document.getElementById(id);
        if(countInput.value<1){
            alert("购买数量不能小于1");
            countInput.value = 1;
        }
    }
</script>
</body>
</html>
